/<template>
  <nav id="nav">
      <div class="nav-item">
        <h3 @click='$exit("toggleCpn","StuManaga")'>学生管理</h3>
        <ul>
          <li>学生信息</li>
          <li>新增学生</li>
          <li>修改学生</li>
        </ul>
      </div>
      <div class="nav-item">
        <h3>教师管理</h3>
        <ul>
          <li>教师信息</li>
          <li>新增教师</li>
          <li>修改教师</li>
        </ul>
      </div>
      <div class="nav-item">
        <h3>班级管理</h3>
        <ul>
          <li>班级信息</li>
          <li>新增班级</li>
          <li>修改班级</li>
        </ul>
      </div>
      <div class="nav-item">
        <h3>课程管理</h3>
        <ul>
          <li>课程信息</li>
          <li>新增课程</li>
          <li>修改课程</li>
        </ul>
      </div>
  </nav>
</template>

<script>
export default {

}
</script>

<style>
  /*border:1px solid red;*/
.nav-item{
  padding: 10px 0;
  height:50px;
  overflow: hidden;
  background-color: none;
  cursor: pointer;
}
.nav-item:hover{
  height:fit-content;
  border-left:5px solid #878787;
}
.nav-item h3{
  width: 100%;
  font-size: 1.2rem;
  padding: 5px;
}
.nav-item ul{
  width: 100%;
}
.nav-item ul>li{
  text-indent: 1em;
  font-size: 1.2rem;
  padding: 5px;
}
.nav-item ul>li:hover{
  border-right:5px solid #878787;
}
</style>